<?php global $bret, $host; $first = true; ?>
<div class="main-your-brets">
    <div class="notification">
        <span>Refer friends to upgrade your account for free!</span>
        <a href="#">Learn more ></a>
        <i class="fa fa-1x5 fa-clear"></i>
    </div>
    <div>
        <div class="title">Bret Editor</div>
        <div class="information" style="padding: 10px 0px 10px 30px;">
            <input type="Text" name="name" id="name" value="New bret" placeholder="Name" style="width: 250px; vertical-align: top">
            <textarea name="description" id="description" style="width: 760px;"></textarea>
            <input class="button" type="submit" value="START" style="float: right" onclick="start()">
            <input class="button" type="submit" value="SAVE" style="float: right;margin-right: 7px;" onclick="save()">
        </div>
        <div class="slides-container">
            <ul class="slides">
                <?php if ($bret) foreach($bret->images as $image) : ?>
                <li class="<?php if ($first) { echo "selected"; $first = false; } ?>">
                    <div class="slide-index"><?php echo $image->index ?></div>
                    <div class="image-container">
                        <img src="<?php echo $image->imageUrl ?>"/>
                    </div>
                </li>
                <?php endforeach; ?>
                <li class="add-slide">
                    <div class="slide-index">+</div>
                    <div class="image-container">
                        <img src=""/>
                    </div>
                </li>
            </ul>
        </div>
        <div class="editor-zone">
            <div class="support-brets">
                <div class="toolbar">
                    <ul class="button-set control">
                        <li class="select selected" title="Select"><i class="fa icon-select-black fa-1x5"></i></li>
                        <li class="circle" title="Circle"><i class="fa icon-circle-black fa-1x5"></i></li>
                        <li class="rectangle" title="Rectangle"><i class="fa icon-rectangle-black fa-1x5"></i></li>
                        <li class="image" title="Image"><i class="fa icon-image-black fa-1x5"></i></li>
                        <li class="text" title="Text"><i class="fa icon-text-black fa-1x5"></i></li>
                    </ul>
                    <ul class="button-set format animation-control">
                        <li class="start selected" title="Start position"><i class="fa fa-1x5">1</i></li>
                        <li class="end" title="End position"><i class="fa fa-1x5">2</i></li>
                    </ul>
                    <ul class="button-set format text-editor-control" style="display: none">
                        <li class="font-size expandable selected" title="Font size">
                            <i class="fa icon-font-size fa-1x5"><span style="font-size: 10pt"></span></i>
                            <ul class="button-set">
                                <li class="large selected" value="120px" title="Large"><i class="fa icon-font-size fa-1x5"></i></li>
                                <li class="medium" value="80px" title="Medium"><i class="fa icon-font-size fa-1x0"></i></li>
                                <li class="small" value="40px" title="Small"><i class="fa icon-font-size fa-0x5"></i></li>
                                <select class="text-size">
                                    <option value="12px">12</option>
                                    <option value="16px">16</option>
                                    <option value="24px">24</option>
                                    <option value="32px">32</option>
                                    <option value="40px">40</option>
                                    <option value="48px">48</option>
                                    <option value="56px">56</option>
                                    <option value="74px">74</option>
                                    <option value="80px">80</option>
                                    <option value="82px">82</option>
                                    <option value="90px">90</option>
                                </select>
                            </ul>
                        </li>
                        <li class="font-weight expandable" title="Font style">
                            <i class="fa icon-font-weight black fa-1x5"></i>
                            <ul class="button-set multi-select">
                                <li class="bold selected" value="bold" title="Bold"><i class="fa icon-font-bold fa-1x5"></i></li>
                                <li class="italic" value="italic" title="Italic"><i class="fa icon-font-italic fa-1x0"></i></li>
                            </ul>
                        </li>
                        <li class="font-color expandable" title="Color">
                            <i class="fa icon-color red fa-1x5"></i>
                            <ul class="button-set">
                                <li value="#ffffff" class="color-white selected" title="White"><span></span></li>
                                <li value="#000000" class="color-black" title="Black"><span></span></li>
                                <li value="#16a085" class="color-green-sea" title="Green Sea"><span></span></li>
                                <li value="#27ae60" class="color-nephritis" title="Nephiritis"><span></span></li>
                                <li value="#2980b9" class="color-belize-hole" title="Belize Hole"><span></span></li>
                                <li value="#8e44ad" class="color-wisteria" title="Wisteria"><span></span></li>
                                <li value="#2c3e50" class="color-midnight-blue" title="Midnight Blue"><span></span></li>
                                <li value="#f39c12" class="color-orange" title="Orange"><span></span></li>
                                <li value="#d35400" class="color-pumpkin" title="Pumpkin"><span></span></li>
                                <li value="#c0392b" class="color-pomegranate" title="Pomegranate"><span></span></li>
                                <li value="#bdc3c7" class="color-silver" title="Silver"><span></span></li>
                                <li value="#7f8c8d" class="color-asbetos" title="Asbetos"><span></span></li>
                            </ul>
                        </li>
                    </ul>
                    <ul class="button-set format object-format" style="display: none">
                        <li class="border-color expandable" title="Border Color">
                            <i class="fa icon-color red fa-1x5"></i>
                            <ul class="button-set">
                                <li value="transparent" class="color-transparent selected" title="Transparent"><span></span></li>
                                <li value="#ffffff" class="color-white" title="White"><span></span></li>
                                <li value="#000000" class="color-black" title="Black"><span></span></li>
                                <li value="#16a085" class="color-green-sea" title="Green Sea"><span></span></li>
                                <li value="#27ae60" class="color-nephritis" title="Nephiritis"><span></span></li>
                                <li value="#2980b9" class="color-belize-hole" title="Belize Hole"><span></span></li>
                                <li value="#8e44ad" class="color-wisteria" title="Wisteria"><span></span></li>
                                <li value="#2c3e50" class="color-midnight-blue" title="Midnight Blue"><span></span></li>
                                <li value="#f39c12" class="color-orange" title="Orange"><span></span></li>
                                <li value="#d35400" class="color-pumpkin" title="Pumpkin"><span></span></li>
                                <li value="#c0392b" class="color-pomegranate" title="Pomegranate"><span></span></li>
                                <li value="#bdc3c7" class="color-silver" title="Silver"><span></span></li>
                                <li value="#7f8c8d" class="color-asbetos" title="Asbetos"><span></span></li>
                            </ul>
                        </li>
                        <li class="background-color expandable" title="Background Color">
                            <i class="fa icon-color red fa-1x5"></i>
                            <ul class="button-set">
                                <li value="transparent" class="color-transparent" title="Transparent"><span></span></li>
                                <li value="#ffffff" class="color-white selected" title="White"><span></span></li>
                                <li value="#000000" class="color-black" title="Black"><span></span></li>
                                <li value="#16a085" class="color-green-sea" title="Green Sea"><span></span></li>
                                <li value="#27ae60" class="color-nephritis" title="Nephiritis"><span></span></li>
                                <li value="#2980b9" class="color-belize-hole" title="Belize Hole"><span></span></li>
                                <li value="#8e44ad" class="color-wisteria" title="Wisteria"><span></span></li>
                                <li value="#2c3e50" class="color-midnight-blue" title="Midnight Blue"><span></span></li>
                                <li value="#f39c12" class="color-orange" title="Orange"><span></span></li>
                                <li value="#d35400" class="color-pumpkin" title="Pumpkin"><span></span></li>
                                <li value="#c0392b" class="color-pomegranate" title="Pomegranate"><span></span></li>
                                <li value="#bdc3c7" class="color-silver" title="Silver"><span></span></li>
                                <li value="#7f8c8d" class="color-asbetos" title="Asbetos"><span></span></li>
                            </ul>
                        </li>
                    </ul>
                    <ul class="button-set format image-format" style="display: none">
                        <li class="image-url expandable" title="Image Url">
                            <i class="fa icon-color red fa-1x5"></i>
                            <input type="file" name="imageUpload" id="image-upload" />
                        </li>
                        <li class="border-color expandable" title="Border Color">
                            <i class="fa icon-color red fa-1x5"></i>
                            <ul class="button-set">
                                <li value="transparent" class="color-transparent selected" title="Transparent"><span></span></li>
                                <li value="#ffffff" class="color-white selected" title="White"><span></span></li>
                                <li value="#000000" class="color-black" title="Black"><span></span></li>
                                <li value="#16a085" class="color-green-sea" title="Green Sea"><span></span></li>
                                <li value="#27ae60" class="color-nephritis" title="Nephiritis"><span></span></li>
                                <li value="#2980b9" class="color-belize-hole" title="Belize Hole"><span></span></li>
                                <li value="#8e44ad" class="color-wisteria" title="Wisteria"><span></span></li>
                                <li value="#2c3e50" class="color-midnight-blue" title="Midnight Blue"><span></span></li>
                                <li value="#f39c12" class="color-orange" title="Orange"><span></span></li>
                                <li value="#d35400" class="color-pumpkin" title="Pumpkin"><span></span></li>
                                <li value="#c0392b" class="color-pomegranate" title="Pomegranate"><span></span></li>
                                <li value="#bdc3c7" class="color-silver" title="Silver"><span></span></li>
                                <li value="#7f8c8d" class="color-asbetos" title="Asbetos"><span></span></li>
                            </ul>
                        </li>
                    </ul>
                    <ul class="button-set float-right">
                        <li class="effects" title="Animation"><i class="fa icon-effect fa-1x5"></i></li>
                        <li class="preview" title="Preview"><i class="fa icon-preview-black fa-1x5"></i></li>
                        <li class="fullscreen" title="Fullscreen"><i class="fa icon-fullscreen-black fa-1x5"></i></li>
                    </ul>
                </div>
            </div>
            <div class="editor">
                <input type="text" class="text-editor" id="text-editor"/>
                <canvas id="myCanvas" width="943" height="530" style="background: #FFF"></canvas >
            </div>
            <div class="effects-zone">
                <ul class="animation-list">
                    <span class="select-hint">Select an object</span>
                </ul>
                <ul class="effects-menu">
                    <li class="bokeh-effect" title="Bokeh" data-type="bokeh"><img src="<?php echo $host ?>/Images/bokeh.png"/>Bokeh</li>
                    <li class="bounce-effect" title="Bounce" data-type="bounce"><img src="<?php echo $host ?>/Images/bounce.png"/>Bounce</li>
                    <li class="float-effect" title="Float" data-type="float"><img src="<?php echo $host ?>/Images/float.png"/>Float</li>
                    <li class="fadein-effect" title="Fade In" data-type="fadeIn"><img src="<?php echo $host ?>/Images/fade.png"/>Fade In</li>
                    <li class="fadeout-effect" title="Fade Out" data-type="fadeOut"><img src="<?php echo $host ?>/Images/fade.png"/>Fade Out</li>
                    <li class="pulse-effect" title="Pulse" data-type="pulse"><img src="<?php echo $host ?>/Images/pulse.png"/>Pulse</li>
                </ul>
            </div>
        </div>
    </div>
</div>
